<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>dom</title>
		<style>
			.lj{
				color: aquamarine;
				font-size: 80px;
				
			}
		</style>
	</head>
	<body>
		<!-- 
		 1.-->
	<!-- 	 <p class="font">摆烂</p>
		<div class="box">冬天</div>
		<div id="box1">下一个春天</div> -->
		<a herf="#" class="lj">空链接</a>
		<input type="text"placeholder="请输入内容" data-index='123'/>
	</body>
	<script>
		// let list=document.querySelector('.box');
		// list.style.color="pink";
		// let list1=document.querySelector('#box1');
		// list1.style.color="green";
		// //innerHTML:获取元素中的所有内容，包括空格，标签，换行
		// console.log(list.innerHTML);
		// console.log(list1.innerHTML);
		// console.log('------------');
		// //innerText:获取元素中所有文本内容，不包括空格，标签，换行
		// console.log(list.innerText);
		// console.log('------------');
		// //textContent:获取元素中的所有文本内容，不包括标签。
		// console.log(list.textContent);
		// 	console.log('------------');
		// list.innerHTML="夏天<br>";
		// console.log(list.innerHTML);
		// console.log('------------');
		// list1.innerText='秋天<strong>aa</strong>';
		// console.log(list1.innerText);
		// let list3=document.querySelector('#box');
		const em1=document.querySelector('.lj');
		console.log(em1.href);//对象.属性:访问元素本身具有的属性
		em1.href="https://www.baidu.com";
		em1.innerHTML='baidu';
		console.log('------------');
		//setAttribute('属性'，'值'):可以设置自带属性或自定义属性
		em1.setAttribute('href','https://www.mi.com');
		console.log(em1.getAttribute('href'));
		const em2=document.querySelector('input');
		console.log(em2.getAttribute('data-index'));
		em2.setAttribute('data-index','789');
		//对象。dataset.属性
		console.log(em2.dataset.index);
		em2.dataset.index='789';
		em1.style.color='pink';
		em1.style.fontSize='50px';//有横杠的去掉横杠，把单词首字母大写
		//className属性操作元素
		em2.className='lj';
	</script>
</html>
